<template>
	<view class="wrap-item" v-if="item">
		<view class="title-bg f-30 flex">
			<view class="must" v-if="item.require">*</view>

			<view class="flex align-base">
				<view class="title">{{ item.title }}</view>
				
				<view class="desc f-24" v-if="item.desc && item.desc !== ''">{{ item.desc }}</view>
			</view>
		</view>

		<view class="wrap-list m-t-30 flex">
			<block v-for="(imgItem, imgIdx) in value === '' ? [] : value.split(',')" :key="imgIdx">
				<view class="photo-item">
					<image class="photo-img" :src="$getImageURL(imgItem)" />

					<image
						class="photo-delete"
						:src="$staticImagePath('common/delete.png')"
						@click="onDeleteImage(imgIdx)"
					/>
				</view>
			</block>

			<image
				class="photo-item"
				v-if="isShow()"
				:src="$staticImagePath('common/upload.png')"
				@click="onChooseImage"
			/>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 输入框的值
			 */
			value: {
				type: String,
				default: "",
			},
			/**
			 * 数据
			 */
			item: {
				type: Object,
				default: null,
			},
		},
		data() {
			return {
				imageList: [],
			};
		},
		methods: {
			/**
			 * 是否显示
			 */
			isShow() {
				if (this.value === "" || this.value.split(",").length < 9) {
					return true;
				} else {
					return false;
				}
			},
			/**
			 * 选择图片
			 */
			onChooseImage() {
				let array = this.$filters.getImageArray(this.value);
				this.$filters.onChooseImage(9 - array.length, (list) => {
					this.onUploadImage(0, list);
				});
			},
			/**
			 * 上传图片
			 */
			onUploadImage(index, list) {
				this.$commonNetwork.onUploadFile(list[index], (res) => {
					this.imageList.push(res.url);

					if (index < list.length - 1) {
						this.onUploadImage(index + 1, list);
					} else {
						let array = this.$filters.getImageArray(this.value);
						array = array.concat(this.imageList);
						this.$emit("input", array.join(","));
						this.imageList = [];
					}
				});
			},
			/**
			 * 删除图片
			 */
			onDeleteImage(index) {
				let array = this.$filters.getImageArray(this.value);
				array.splice(index, 1);
				this.$emit("input", array.join(","));
			},
		},
	};
</script>

<style>
	@import "@/css/publish.css";
	
	.desc {
		margin-left: 15rpx;
		color: #999999;
	}
</style>
